<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" href="../css/main.css" />		
		<script src="html5plus://ready"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/ajax.js"></script>
		<script src="../js/vue-lazyload.js"></script>
		<title></title>
		<style type="text/css">
			#sa{
				width: 95%;
				margin: 10px auto;
				border-radius: 30px/30px;
				background-color:  white;
			}
			#sa a{
				color: rgba(0,0,0,0.5);
			}
			#sa a:hover{
				color: rgba(0,0,0,0.5);
			}
			li{
				list-style: none;
			}
		</style>
	</head>
	<body>
		<div id="app">
				<header>
					<van-search background="red" placeholder="请输入搜索关键词" show-action shape="round">
					  <div slot="action">
					  <div slot="action" class="size">
						  <van-icon name="chat-o"></van-icon>
					  </div>
					</van-search>
				</header>
			<section  class="margin" style="background-color:  #E5E5E5;">
				<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
				<van-swipe :autoplay="3000" indicator-color="white">					
					<van-swipe-item v-for="(image,index) in images" :key="index">
						<img :src="image.ImageUrl" style="height: 200px;width:100%;"/>
					</van-swipe-item>						 	  
				</van-swipe>
				<div id="sa">
					<van-row>
						<van-col span="4" style="text-align: center;line-height: 40px;color: red;font-size: 12px;">
							<a style="color: red;"href="javascript:;">资讯</a>
							<span style="border: 0.5px solid black;margin-left: 10px;"></span>
						</van-col>						
						<van-col span="16">
							<van-notice-bar	text="之前随着4G网络的普及和应用，让很多用户感受到了网络的迅速崛起，而国内的三大运营商也趁此机会推出了大流量的套餐，招揽了不少的用户。"
							 left-icon="volume-o"></van-notice-bar>
						</van-col>	
						<van-col span="4" style="text-align: center;line-height: 40px;color: rgba(0,0,0,0.5);font-size: 12px;">
							<span style="border: 0.5px solid black;margin-right: 10px;"></span>
							<a style="color: red;"href="javascript:;">更多</a>
							</van-col>						
					</van-row>	
				</div>			
				<van-row style="background-color: #F8F8F8; margin-top:10px;padding-left: 15px;">				    
				   <van-col span="6" v-for="item in type">
				    	<div style="width: 45px;height: 45px; border-radius: 15px/15px;background-color: plum;
							font-size: 25px;margin-top: 10px;margin-left: 10px;color: white;text-align: center;line-height: 45px;">
				    		{{item.Name[0]}}	
				    	</div>	
						<div style="font-size: 12px;margin-left: 10px;margin-top:5px;color: darkgray;margin-bottom: 5px;">
							{{item.Name}}
						</div>								 
				      </van-col>												   
				</van-row>	
				<van-row>
					<van-col span="6">热门推荐</van-col>
				</van-row>
				<van-row>
					<van-col span="8">
						<img src="hot.GoodsImageUrl" onerror="this.src='../img/beng-1.jpg'" style="width: 110px;height: 100px;">					
					</van-col>							
				</van-row>
				<div id="lb">
					<van-row>
						<van-col span="6">商品列表</van-col>
					</van-row>									
					<van-row>						
						<van-col span="24" >							
							<van-list v-model="loading" :finished="finished" finished-text="没有更多了" error-text="加载失败" @load="onLoad">
							<li v-for="(item, index) in list" :name="item.id">
								<van-card :num="item.count" :price="item.RealPrice" :origin-price="item.MarketPrice" :title="item.Name" @click="onClickUrl(index)">
									<img slot="thumb" :src="item.GoodsImageUrl.src" onerror="this.src='../img/beng-1.jpg'" />
									<span slot="footer">
										<label style="padding-right: 20%;">累计销售{{item.VirtualSaleCount}}</label>
										<label>{{item.BrowseCount}}次浏览</label>
									</span>
								</van-card>
							</li></van-list>
							
						</van-col>
					</van-row>											
				</div>
				</van-pull-refresh>								
			</section>
		</div>
		<script type="text/javascript">			
			var vm=new Vue({
				el:"#app",
				data:{
					value: "",					
					images:[],
					type:[],
					hot:[],
					zixun:[],
					list: [], //产品列表
					loading: false,
					finished: false,
					isLoading: false
				},
				created:function(){
					_this=this;
					ajax({
						url:"http://dsapi.ysd3g.com/api/IndexData",
						dataType:"jsonp",
						data:{
							p: 1
						},
						success:function(res){
							_this.images=res.Data.CarouselFigureList;
							_this.hot=res.Data.GoodsRecommendList;
							_this.type=res.Data.HotGoodsTypeList;
							_this.zixun=res.Data.InformationList;
							console.log(res);
						}
					}),
					ajax({
						url:"http://dsapi.ysd3g.com/api/IndexGoodsData",
						dataType:"jsonp",
						data:{
							p:1
						},
						success:function(res){	
							_this.list=res.Data;
							console.log(res);
						}
					})
				},
				methods: {				
					onClickUrl: function(i) {
						console.log(i);
						console.log(this.list[i]);
						var id = this.list[i].Id;
						console.log(id);
						var shopXQ = plus.webview.create("../views/mainHtml/xq.html", "xq", {}, {
							ID: id
						}); 
						shopXQ.show();
						console.log(shopXQ.ID);
					},
					onRefresh: function() {						
						setTimeout(() => {
							this.$toast('刷新成功');
							this.isLoading = false;
						}, 500);
					},					
					onSearch: function() {						
						ajax({
							url: "http://dsapi.ysd3g.com/api/GoodsSearch",
							dataType: "jsonp",
							data: {
								name:vm.value
							},
							success: function(res) {
								console.log(res);
								vm.list = res.Data;
								Vue.use(VueLazyload, {
									error: "../img/beng-1.jpg"
								});
								console.log(_this.list);								
							}
						});
						if(this.value==""){
							ajax({
								url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
								dataType: "jsonp",
								data: {
									p: 1
								},
								success: function(res) {
									//console.log(res);
									vm.list = res.Data;
									//console.log(_this.IndexGoodsData);
									var hm = plus.webview.getWebviewById("home");
									hm.reload(true);
								}
							});
						}
					},
					onLoad: function() {
						setTimeout(() => {								
							this.loading = false;
							this.finished = true;
						}, 3000)
					}
				}
			})
		</script>
	</body>
</html>
